<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>高仿微信</title>
    <link rel="stylesheet" href="font/iconfont.css"/>
    <link rel="stylesheet" href="css/index.css"/>
 
 <script>

      var wsUrl = "ws://172.16.11.111:8812";

    var websocket = new WebSocket(wsUrl);

    //实例对象的onopen属性
    websocket.onopen = function(evt) {
      // websocket.send("欢迎新用户");
      var name=getQueryVariable("name")

                
        

       var data='{ "name":"'+name+'", "type": "open" }';

      websocket.send(data);



      // console.log("conected-swoole-success");
    }

    // 实例化 onmessage
    websocket.onmessage = function(evt) {
      push(evt.data);
    }

    //onclose
    websocket.onclose = function(evt) {
      console.log("close");
    }
    //onerror

    websocket.onerror = function(evt, e) {
      console.log("error:" + evt.data);
    }

    function push(data){

        // console.log(data);
            var data=JSON.parse(data);


        if (data.type ==  "newmem") {
             
            var html= '<li onclick="zzz('+data.fd+')"  id="kkk'+data.fd+'">'
                html+=       ' <a href=""><img src="images/1.png" alt=""/></a>'
                html+=       ' <div class="content">'
                html+=       '     <h3>'+data.name+'</h3>'
                html+=        '    <p>'+data.fd+'</p>'
                html+=        '</div>'
                 html+=  ' </li>'

                    $('.zzz').append(html);
                    // console.log(data.name);
                    // $('#'+data.name).val(data.fd);

       var ht='<input type="hidden"  id="'+data.name+'"  value="'+data.fd+'" >';

         $('.zzz').append(ht);


        var ht2='<input type="hidden"  id="fff'+data.fd+'"  value="'+data.name+'" >';

         $('.zzz').append(ht2);






        };


         if (data.type == "memlist") {
            var  arr=data.udata;
            // console.log(arr);
            for (x in arr){ 

              // console.log(x);
              // console.log(arr[x]);

              var html= '<li onclick="zzz('+x+')"    id="kkk'+x+'" >'
                html+=       ' <a href=""><img src="images/1.png" alt=""/></a>'
                html+=       ' <div class="content">'
                html+=       '     <h3>'+arr[x]+'</h3>'
                html+=        '    <p>'+x+'</p>'
                html+=        '</div>'
                 html+=  ' </li>'

                    $('.zzz').append(html);

                     var ht='<input type="hidden"  id="'+arr[x]+'"  value="'+x+'" >';

         $('.zzz').append(ht);

                    var ht3='<input type="hidden"  id="fff'+x+'"  value="'+arr[x]+'" >';

         $('.zzz').append(ht3);
        
                }

        };

       
         if (data.type === "oto") {

        // http://172.16.11.111:8811/?s=index/index/addtalk&name1=kxxx&name2=zffff&data=4212412412421445151525
        //http://172.16.11.111:8811/?s=index/index/gettalklist&name1=kxxx&name2=zffff
         // console.log(data);
      var name1=getQueryVariable("name")

            $('.user').text(data.fromname);

            var nameto= $('#fff'+data.tofd).val();



             url = "http://172.16.11.111:8811/?s=index/index/gettalklist&name1="+name1+"&name2="+nameto;
     
        // $.post()
        $.get(url, function (data) {
          // TODO: 将下面3行代码删除
        

          var data1=(JSON.parse(data));
          var datazzzzz=(JSON.parse(data1));
      
            // console.log(datazzzzz);
          for (a in datazzzzz){ 

            // console.log(datazzzzz[a].name);
            if (datazzzzz[a].name == name1) {

                var  htmlkkk='<div class="self">'
                 htmlkkk+=     '<span>'+datazzzzz[a].content+'</span>'
                 htmlkkk+=     '<img src="images/1.jpg" alt=""/>'
                 htmlkkk+=  '</div>'

                 

                  $(".container").append(htmlkkk);
                

            }else{

               var  htmlkkk='<div class="person">'
                 htmlkkk+=     '<img src="images/1.jpg" alt=""/>'
                 htmlkkk+=     '<span>'+datazzzzz[a].content+'</span>'
                  htmlkkk+=  '</div>'

                  $(".container").append(htmlkkk);
                

            };

          }
       
        });


            



             $('#kkk'+data.fromname).css("background-color","#8B8989");


             var robot= $('<div class="person"><img src="images/1.jpg" alt=""/><span>'+data.data+'</span></div>')
            $(".container").append(robot);
            var heightdis = $(".container").height() - $(".dialouges").height();
            // console.log(heightdis);
            if(heightdis >=0){
                $(".dialouges").scrollTop(heightdis);
            }



             url22 = "http://172.16.11.111:8811/?s=index/index/addtalk&name1="+data.fromname+"&name2="+name1+"&data="+data.data;
      
      console.log(url22);
        // $.post()
             $.get(url22, function (e) {
                 console.log(e);
               })


         }




    }


     function getQueryVariable(variable){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
    }

 </script>
</head>
<body>
    <div class="wrapper">
       <div class="sidebar">
           <ul>
               <!-- <li><img src="images/1.jpg" alt=""/></li> -->
               <li>1214</li>
               <li class="iconfont icon-liaotian1 lt"></li>
               <li class="iconfont icon-tongxunlu txl"></li>
               <li class="iconfont icon-shoucang sc"></li>
               <li class="iconfont icon-101 more"></li>
           </ul>
       </div>
        <!-- 中间的tab栏-->
        <div class="tabs">
            <div class="search">
               <!--  <input type="text" placeholder="搜索"/>
                <span class="iconfont icon-search"></span> -->
                <span>124124124</span>
                <span class="plus">+</span>
            </div>
            <div class="talk">
                <ul class="zzz">
                  <!--   <li onclick="zzz()"  style="background:#8B8989">
                        <a href=""><img src="images/1.png" alt=""/></a>
                        <div class="content">
                            <h3>前端大神群</h3>
                            <p>：[动画表情]</p>
                        </div>
                    </li> -->
                    
                </ul>
            </div>
        </div>
        <!-- 右侧的主要区域-->
        <div class="main">
            <div class="top">
                <div class="mini">-</div>
                <div class="max">□</div>
                <div class="close">x</div>

            </div>
            <div class="name">
                <div class="user">歡迎來到聊天室</div>
                <!-- <div class="more">···</div> -->
            </div>
            <div class="dialouges">
                <div class="container">

                </div>
                <!--<div class="person">-->
                    <!--<img src="images/1.jpg" alt=""/>-->
                    <!--<span>好的</span>-->
                <!--</div>-->
                <!--<div class="self">-->
                    <!--<span>好的</span>-->
                    <!--<img src="images/1.jpg" alt=""/>-->
                <!--</div>-->
            </div>
            <div class="message">
                <div class="menu">
                    <div class="smile iconfont icon-biaoqing"></div>
                    <div class="doc iconfont icon-wenjian"></div>
                    <div class="snap iconfont icon-jieping  "></div>
                    <div class="video iconfont icon-shipin"></div>
                    <div class="speak iconfont icon-dianhua"></div>
                </div>
                <textarea name="" id="txt" cols="30" rows="10"></textarea>
                <div class="send"><span>发送(S)</span></div>

            </div>

        </div>
    </div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/index.js"></script>

<script>

function zzz(e){

   $('.zzz li').css('background-color','#EEDFCC');
   $('.container').html('')
             $('#kkk'+e).css("background-color","#8B8989");


            var nameto= $('#fff'+e).val();

 var name1=getQueryVariable("name");



            $('.user').text(nameto);

             // console.log(nameto);
            //获取以往的聊天记录
     url = "http://172.16.11.111:8811/?s=index/index/gettalklist&name1="+name1+"&name2="+nameto;
     
        // $.post()
        $.get(url, function (data) {
          // TODO: 将下面3行代码删除
        

          var data1=(JSON.parse(data));
          var datazzzzz=(JSON.parse(data1));
      
            // console.log(datazzzzz);
          for (a in datazzzzz){ 

            // console.log(datazzzzz[a].name);
            if (datazzzzz[a].name == name1) {

                var  htmlkkk='<div class="self">'
                 htmlkkk+=     '<span>'+datazzzzz[a].content+'</span>'
                 htmlkkk+=     '<img src="images/1.jpg" alt=""/>'
                 htmlkkk+=  '</div>'



                  $(".container").append(htmlkkk);
                

            }else{

               var  htmlkkk='<div class="person">'
                 htmlkkk+=     '<img src="images/1.jpg" alt=""/>'
                 htmlkkk+=     '<span>'+datazzzzz[a].content+'</span>'
                  htmlkkk+=  '</div>'

                  $(".container").append(htmlkkk);
                

            };

          }
          // if (result.status != 'ok') {
          //  alert('网络错误');
          // }
        });


}
   
</script>

